<template>
	<view class="container">
		<!-- 投诉建议 -->
		<view>
			<card20 v-for="item in suggest" :title="item.title" class="mt-2" @click="GoComplaint">
				<template v-slot:main-title>
					<image :src="item.mainTitle" />
				</template>
				<template v-slot:main>
					<view style="margin: 5rpx 0;">{{ item.main }}</view>
				</template>
				<template v-slot:fu-title>
					<text :style="{ color: item.extra == '已处理' ? '#39baf3' : '#d9001b' }">{{ item.extra }}</text>
				</template>
				<template v-slot:fu-icon>
					<image src="../../static/image/箭头.png" mode="scaleToFill"
						style="width: 30rpx ; height: 30rpx;vertical-align: middle;margin-top: -10rpx;" />
				</template>
				<template v-slot:floot-left>
					<view class="rep-foot">
						<view class="rep-foot-item">
							<image
								src="https://cdn7.axureshop.com/demo/1996612/images/%E5%9C%A8%E7%BA%BF%E6%8A%A5%E4%BF%AE/u6981.svg">
							</image>
							<text>{{ item.flootLeft }}</text>
						</view>
					</view>
				</template>
				<template v-slot:floot-right>
					<view class="rep-foot">
						<view class="rep-foot-item">
							<image
								src="https://cdn7.axureshop.com/demo/1996612/images/%E5%9C%A8%E7%BA%BF%E6%8A%A5%E4%BF%AE/u6982.svg">
							</image>
							<text>{{ item.flootRight }}</text>
						</view>
					</view>
				</template>
			</card20>
		</view>

		<!-- 占位 -->
		<view class="Addmt-2" @click="GeAddSuggest">
			<image src="/static/image/加号.png" mode="scaleToFill" />
		</view>

	</view>
</template>

<script setup>
import { ref } from 'vue';
import card20 from '../../components/card-2.0.vue';
let suggest = ref([
	{
		title: "物业服务",
		extra: "已处理",
		mainTitle: "https://cdn7.axureshop.com/demo/1996612/images/%E6%8A%95%E8%AF%89%E5%BB%BA%E8%AE%AE/u7487.svg",
		main: "12号楼4单元的楼道清扫不及时，经常有垃圾的情况，希望物业勒打扫.",
		flootLeft: "2022-02-1218:25:47",
		flootRight: "花园国际小区"
	},
	{
		title: "物业服务",
		extra: "待处理",
		mainTitle: "https://cdn7.axureshop.com/demo/1996612/images/%E5%9C%A8%E7%BA%BF%E6%8A%A5%E4%BF%AE/u6979.svg",
		main: "每天早上5点多，楼下遛狗人多，叫声影响大家睡觉，希望物业贴告示，让养狗业主注意。",
		flootLeft: "2022-02-1218:25:47",
		flootRight: "花园国际小区"
	},
])
let GeAddSuggest = () => {
	uni.navigateTo({
		url: '/pages/suggest/AddSuggest/AddSuggest'
	})
}
let GoComplaint = () => {
	console.log(111);
	uni.navigateTo({
		url: '/pages/suggest/complaint/complaint'
	})
}
</script>

<style lang="scss">
.container {
	height: calc(100vh - 88rpx);
	background-color: #f5f5f5;
	overflow: hidden;
}

.mt-2 {
	padding-top: 20rpx;
	
	image {
		width: 60rpx;
		height: 60rpx;
		vertical-align: middle;
	}
}

.rep-foot {
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: space-between;

	.rep-foot-item {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 80rpx;
		align-items: center;
		justify-content: center;

		image {
			width: 40rpx;
			height: 40rpx;
			vertical-align: middle;
		}
	}
}

.Addmt-2 {
	width: 100rpx;
	height: 100rpx;
	position: fixed;
	bottom: 100rpx;
	right: 45%;
	background-color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 10rpx 0 #03a7f0;

	image {
		width: 50rpx;
		height: 50rpx;
	}
}
</style>
